<div class="row floor">
  <div class="container">
    <div class="floor-head">
      <h3 class="pull-left">{{ title }}</h3>
      {% if title_recommend %}
        <ul class="floor-title-recommend pull-right">
          {% for recommend in title_recommend %}
            <li><a href="{{ recommend.href }}" target="_blank">{{ recommend.name }}</a> </li>
          {% endfor %}
        </ul>
      {% endif %}
      <div class="clearfix"></div>
    </div>
    <div class="floor-content">
      <div class="col-lg-4 col-md-4 col-sm-4 hidden-xs single floor-image" style="background-color: {{ color }};">
        <img src="{{ image }}" alt="{{ name }}" class="img-responsive">
        {% if image_recommends %}
          <ul class="image-recommends">
            {% for recommend in image_recommends %}
              <li><a href="{{ recommend.href }}" target="_blank">{{ recommend.name }}</a></li>
            {% endfor %}
          </ul>
        {% endif %}
      </div>
      <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 single floor-product-out">
        {% if products %}
          {% for key, product in products %}
            <div class="floor-product col-lg-4 col-md-4 col-sm-4 single">
              <div class="floor-product-content {% if key < 3 %}top{% endif %} {% if (key + 1) % 3 == false %}right{% endif %}">
                <a href="{{ product.href }}" title="{{ product.name }}" target="_blank">
                  <div class="floor-product-image">
                    <img src="{{ product.image }}" alt="{{ product.name }}" class="img-responsive" />
                  </div>
                  <p class="name over-hidden">{{ product.name }}</p>
                  {% if product.price %}
                    <p class="price">
                      {% if not product.special %}
                        {{ product.price }}
                      {% else %}
                        <span class="price-new">{{ product.special }}</span>
                        <span class="price-old">{{ product.price }}</span>
                      {% endif %}
                      {% if product.tax %} <span class="price-tax">{{ text_tax }} {{ product.tax }}</span> {% endif %} </p>
                  {% endif %}
                  <div class="floor-btn text-center"><i class="iconfont">&#xe60c;</i>{{ text_cart }}</div>
                </a>
              </div>
            </div>
          {% endfor %}
        {% endif %}
      </div>
      <div class="col-lg-2 col-md-2 col-sm-2 hidden-xs single floor-banner">
        {% if banners %}
          <div class="floor-banner-container">
            <div class="banner-pagination"></div>
            <div class="swiper-wrapper">
              {% for banner in banners %}
                <div class="swiper-slide" style="background-color: #EBEBEB;">
                  <a href="{{ banner.href }}" target="_blank" title="{{ banner.title }}">
                  <img src="{{ banner.thumb }}" alt="{{ banner.title }}" class="img-responsive">
                  </a>
                </div>
              {% endfor %}
            </div>
          </div>
        {% endif %}
      </div>
      <div class="clearfix"></div>
    </div>
  </div>
</div>
<script type="text/javascript">
  new Swiper('.floor-banner-container', {
    loop: true,
    autoplay: {
      delay: 1500,
      disableOnInteraction: false,
    },
    pagination: {
      el: '.banner-pagination',
      clickable: true,
    },
  });
</script>
<style type="text/css">
  .banner-pagination .swiper-pagination-bullet-active {
    background-color: {{ color }};
  }

  .floor-image .image-recommends li a:hover {
    background: #ffffff;
    color: {{ color }};
  }

  .floor-product-content a:hover .name {
    color: {{ color }};
  }
</style>